<template>
    <div class="main">
        <a-row class="top-title">
            <a-col :span="6"><h3><span>专业名称：</span>电力专业</h3></a-col>
            <a-col :span="6"><h3><span>科室名称： </span>电力技术科</h3></a-col>
        </a-row>
        <a-row class="alarm">
            <a-col :span="6">
                <h3><span>距有效截止日期前的提醒天数：</span></h3>
            </a-col>
            <a-col :span="2">
                <a-input-number id="inputNumber" v-model:value="value" :min="0" :max="20" />
            </a-col>
            <a-col :span="3">
                <a-button type="primary" class="btn" @click="success">确定</a-button>
            </a-col> 
        </a-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
const value = ref('20')
const success = () => {
      message.success('提醒设置成功');
};
</script>

<style lang="less" scoped>
.main{
    padding: 20px 0 0 20px;
}
h3{
    display: inline-block;
}
span{
    font-weight: 700;
}
.alarm{
    padding: 20px 0;
}
.btn{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 38px;
    width: 80px;
}
</style>